<template>
	<view class="detail-wrap ">
		<scroll-view style="height: 90vh;" scroll-y="" @ >
			
			<shopro-login-modal></shopro-login-modal>
			<public-module></public-module>
			<!-- 标题栏 -->
			<view class="nav-box">
				<view class="state-hack"></view>
			</view>
			<view class="detail_box">
				<view class="detail-content">
					<!-- 轮播 -->
					<u-swiper :height="750" borderRadius="0" :list="detailObj.thumb_url"
						indicator-pos="bottomRight" mode="number" :interval="3000" @click="onGoodsSwiper"></u-swiper>
					<!-- 标题 -->
					<view class="u-m-b-10 title-box u-skeleton-fillet" style="padding: 28rpx 20rpx 0;">
						<view class="goods-title u-m-b-10 u-ellipsis-2">{{ detailObj.title }}
						</view>
						<!-- <view class="sub-title u-ellipsis-2">{{ goodsInfo.subtitle }}</view> -->
						<view class="butie-box" style="margin-top: 10rpx;">
							<text class="butie-left">运费： {{detailObj.dispatch_price}}元</text>
							<text class="butie-right">已售 : {{detailObj.virtual_sales}}</text>
						</view>
						<view class="price">
							￥{{shopType==2 ? detailObj.x_str : detailObj.price}}
						</view>
					</view>
					
					<!-- 规格 服务 -->
					<view class="middleContent">
						<view v-if="detailObj.has_many_options.length > 0 ? true : false " class="middleContent-item" @click="selectShopType">
							<text>{{orderObj.specification.title ?  '已选' : '选择'}}</text>
							<view class="content">
								{{orderObj.specification.title ?  orderObj.specification.title : '请选择规格'}}
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
						<view class="middleContent-item" @click="openServerPopup">
							<text>服务</text>
							<view class="content">
								<image class="selectIcon" src="../../../static/images/other/selectIcon.png" mode=""></image>
								已交保证金，资质保障
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					
					<!-- 选项卡内容 -->
					<view class="tab-detail u-p-20 u-m-b-10">
						<view class="detail-title">
							商品详情
						</view>
						<!-- 详情富文本 -->
						<view class="rich-box ">
							<u-parse :html="detailObj.content"></u-parse>
						</view>
					</view>

				

				</view>
			</view>
			
		</scroll-view>
		
		
		<!-- 商品foot -->
		<view class="tabbar-foot safe-area-inset-bottom" >
			<view class="detail-foot_box safe-area-inset-bottom  u-flex">
				<!-- foot左侧 -->
				<view class="left u-flex">
					<!-- 积分foot -->
					<view class="tools-item u-flex-col u-row-center" style="padding-left: 31rpx;">
						<image class="tool-img shopro-selector-circular"
							src="../../../static/images/index/index.png" mode=""></image>
						<text @tap="$Router.pushTab({path: '/pages/index/index'});" class="tool-title shopro-selector-rect">首页</text>
					</view>
				</view>
				<!-- foot右侧 -->
				<view class="detail-right">
					<!-- 积分按钮 -->
					<view class="detail-btn-box">
						<button class="u-reset-button  score-btn" @tap="goOrder">{{ shopType==2 ? '立即兑换' : '立即购买'}}</button>
						</view>
				</view>
			</view>
		</view>
		
		<!-- 服务弹窗 -->
		<bottomPopup ref="serverPopup">
			<view class="serverPopup">
				<view class="title">
					服务保障
				</view>
				<view class="content">
					<view class="contentItem">
						<view class="content-title">
							<image class="selectIcon" src="../../../static/images/other/selectIcon.png" mode=""></image>
							已交保证金
						</view>
						<view class="text">商家已向平台缴纳保证金，交易产生纠纷时用于保证买 家的权益</view>
					</view>
					<view class="contentItem">
						<view class="content-title">
							<image class="selectIcon" src="../../../static/images/other/selectIcon.png" mode=""></image>
							资质认证
						</view>
						<view class="text">商家已向平台提交营业执照，许可资质等相关资质证明。</view>
					</view>
					
				</view>
				<view class="btn" @click="openServerPopup()">
					好的
				</view>
			</view>
		</bottomPopup>
		
		<!-- 服务弹窗 -->
		<bottomPopup ref="specification">
			<view class="specification">
				<view class="top-content">
						<view class="cover">
							<image  :src="orderObj.specification.thumb" mode="widthFix"></image>
						</view>
						<view class="price">￥{{orderObj.specification.product_price}}
							<view class="num">
								库存：{{orderObj.specification.stock}}
							</view>
						</view>
				</view>
				<view class="middle-content">
					<text>规格</text>
					<view class="arr">
						<view :class="item.title == orderObj.specification.title ? 'activeItem item' : 'item'" v-for="(item,index) in detailObj.has_many_options" :key="index" @click="changeSpecification(item)">
							{{item.title}}
						</view>
					</view>
				</view>
				<view class="bottom-content">
					<text>数量</text>
					<view class="count">
						<text style="color: #ABAAAA;" @click="subNum()">-</text>
						<u-input v-model="orderObj.num" @blur="numChange" class="input" type="number" border />
						<text @click="addNum">+</text>
					</view>
				</view>
				<view class="btn" @click="goOrder()">
					{{ shopType==2 ? '立即兑换' : '立即购买'}}
				</view>
			</view>
		</bottomPopup>
	</view>
</template>
<script>

	import bottomPopup  from "@/components/bottom-popup/bottom-popup.vue"
	
	import {
		mapState 
	} from 'vuex';
	let systemInfo = uni.getSystemInfoSync();
	
	export default {
		components: {
			bottomPopup,
		},
		data() {
			return {
				firstFlage: 0,
				subsidy: '',
				team_str: '',
				backIconName: 'arrow-left',
				showEmpty: false,
				showEmptyText: '',
				goodsInfo: {},
				activityRules: {},
				showSku: false, //是否显示规格弹窗
				currentSkuText: '', //选中规格
				showServe: false, // 服务弹窗
				tabCurrent: 'tab0', // 选项卡选中
				upOption: {
					auto: false
				},
				downOption: {
					auto: false
				},
				tabList: [ // 选项卡
					{
						id: 'tab0',
						title: '商品详情'
					},
					// {
					// 	id: 'tab1',
					// 	title: '规格参数'
					// },
					// {
					// 	id: 'tab2',
					// 	title: '用户评价'
					// }
				],
				commentNum: 0, //商品评价总数
				commentList: [],

				num: 0,
				bag1animation: {},
				openbrnanimation: {},
				rbagmodelshow: false,
				openrbagmodelshow: false,
				subsidylist: [],
				teammemberid: '',
				result: {},
				tixinFlage: 0,
				is_zj: 0, // 是否中奖
				countDay: 1,
				orderObj: {
					specification: {},
					num: 0,
				},
				specificationObj:{},//规格
				specificationArr:[],
				shopType: 1 ,// 2 积分兑换
				detailObj: {},
				addressObj: {},
				goodsId: '',
			};
		},
		onShow: function() {
		
		},
		methods: {
			numChange(e){
				console.log(e);
				if(e > this.orderObj.specification.stock){
					console.log('数量不能大于库存');
					uni.showToast({
						icon: 'none',
						text: '数量不能大于库存',
						duration: 3000,
					})
					this.orderObj.num = 1
					return
				}
			},
			subNum(){
				if(this.orderObj.num==0){
					return
				}
				this.orderObj.num--
			},
			addNum(){
				if(this.orderObj.num == this.orderObj.specification.stock){
					return
				}
				this.orderObj.num++
			},
			// 规格改变
			changeSpecification(_item){
				this.orderObj.specification = _item
			},
			selectShopType(){
				this.$refs.specification.show = !this.$refs.specification.show
			},
			goOrder(){
				if(!this.detailObj.has_many_options.length){
					this.orderObj.num = 1
					this.junit('/pages/prefile/order/orderDetail' , {type: 0,shopType: this.shopType,goodsId: this.detailObj.id,num: this.orderObj.num})
				}
				
				if(this.orderObj.num == 0){
					 this.orderObj.num = 1
					 this.$refs.specification.show = true
					 return
				}
				// 预下单
				// this.preOrder()
				// return
				this.junit('/pages/prefile/order/orderDetail' , {type: 0,shopType: this.shopType,goodsId: this.detailObj.id,specificationId: this.orderObj.specification.id,num: this.orderObj.num})
			},
			openServerPopup(){
				this.$refs.serverPopup.show = !this.$refs.serverPopup.show
				if(this.$refs.serverPopup.show){
					
				}
			},
			
			getGoodsDetail(_id){
				this.myHttp({
					url:'/addons/yun_shop/api.php',
					data:{
						mid:this.userInfo.uid,
						// mid:this.userInfo.uid,
						route : 'goods.goods.mapp-goods-detail',
						id : _id,//参团id
					}
				}).then((res)=>{
					if(res.result== '1'){
						console.log(res);
						this.detailObj = res.data
						console.log('规格');
						console.log(this.detailObj.has_many_options);
						if(this.detailObj.has_many_options.length){
							this.orderObj.specification = this.detailObj.has_many_options[0]
						}
						uni.stopPullDownRefresh()
					}
				})
			},
			// 
			goPingtuan() {
				if (this.$Route.query.teammemberid) {
					this.$Router.push({
						path: '/pages/index/collage-detail/collage-detail',
						query: {
							id: this.$Route.query.id,
							teammemberid: this.$Route.query.teammemberid
						}
					})
				} else if (this.teammemberid) {
					this.$Router.push({
						path: '/pages/index/collage-detail/collage-detail',
						query: {
							id: this.$Route.query.id,
							teammemberid: this.teammemberid
						}
					})
				}
				this.is_zj = 0;
				this.tixinFlage = 0;
			},

			// 轮播图预览
			onGoodsSwiper(e) {
			},
			
		},
		computed: {
			...mapState(['AuthToken', 'userInfo']),
			navbarHeight() {
				// #ifdef APP-PLUS || H5
				return 48;
				// #endif
				// #ifdef MP
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				return height;
				// #endif
			}
		},
		async onLoad({id,shopType}) {
			console.log(id);
			this.goodsId = id
			if(shopType){
				this.shopType = shopType
				console.log(this.shopType)
			}
			this.getGoodsDetail(this.goodsId)
		
		},
		onPullDownRefresh(){
			this.getGoodsDetail(this.goodsId)
		},
		// #ifdef MP-WEIXIN
		// 分享好友
		onShareAppMessage(res) {
			let shareInfo = {};
			shareInfo.path =
				`/pages/index/goods-detail/goods-detail?id=${this.$Route.query.id}&shareid=${this.userInfo.uid}`;
			shareInfo.image = this.goodsInfo.has_one_group.has_one_goods.thumb_url[0];
			shareInfo.title = `和我一起拼团，领${this.goodsInfo.has_one_group.subsidy}元商家补贴`;
			return {
				title: shareInfo.title,
				path: shareInfo.path,
				imageUrl: shareInfo.image,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				},
				complete() {}
			}
		},

		// #endif
	}
</script>

<style scoped lang="scss">
	// 标题栏
	.nav-box {
		position: fixed;
		width: 100%;
		min-height: 140rpx;
		z-index: 888;
		top: 0;
		.back-box {
			background-color: rgba(#000, 0.18);
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-top: 14rpx;
			
		}
		.back-hover {
			background-color: rgba(#fff, 0.18);
		}
		.state-hack {
			width: 100%;
			height: var(--status-bar-height);
			/* #ifdef H5 */
			height: 20rpx;
			/* #endif */
		}
	}
	// 拼团玩法
	.groupon-play {
		background: #fff;
		line-height: 94rpx;
		.title {
			font-size: 28rpx;
			color: #999;
		}
	
		.description {
			font-size: 28rpx;
			width: 500rpx;
			margin-left: 30rpx;
		}
	}
	
	// 选项卡
	.tab-box {
		height: 102rpx;
		background: #fff;
		border-bottom: 1rpx solid rgba(#dfdfdf, 0.8);
		margin-top: 10rpx;
	
		.tab-item {
			flex: 1;
			height: 100%;
			position: relative;
			font-size: 30rpx;
			font-weight: bold;
	
			.tab-line {
				width: 123rpx;
				height: 4rpx;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				background: transparent;
				position: absolute;
				z-index: 2;
			}
	
			.line-active {
				background: rgba(168, 112, 13, 1);
			}
		}
	}
	
	// 选项卡内容
	.tab-detail {
		min-height: 300rpx;
		background: #fff;
		// 规格参数
		.goods-size {
			.table-box {
				width: 710rpx;
				margin: auto;
				background: rgba(255, 255, 255, 1);
				border: 1rpx solid rgba(223, 223, 223, 1);
	
				.t-tr {
					border-bottom: 1rpx solid rgba(223, 223, 223, 1);
					&:last-child {
						border-bottom: none;
					}
	
					.t-head {
						font-size: 26rpx;
						color: #999;
						flex: 1;
						padding: 15rpx 20rpx;
						height: 100%;
					}
	
					.t-detail {
						font-size: 26rpx;
						border-left: 1rpx solid rgba(223, 223, 223, 1);
						flex: 4;
						padding: 15rpx 20rpx;
						height: 100%;
					}
				}
			}
		}
		// 富文本
		.rich-box {
			/deep/ img {
				display: block;
			}
		}
		// 评论
		.goods-comment {
			.more-box {
				height: 100rpx;
				background: #fff;
	
				.more-btn {
					width: 200rpx;
					line-height: 60rpx;
					border: 1rpx solid rgba(213, 166, 90, 1);
					border-radius: 30rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(168, 112, 13, 1);
					padding: 0;
					background: #fff;
	
					.cuIcon-right {
						font-size: 30rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
	}
	
	// 规格卡片
	.sku-box {
		line-height: 82rpx;
		background: #fff;
		padding: 0 20rpx;
		margin: 10rpx 0;
		font-size: 28rpx;
	
		.title {
			color: #999;
			margin-right: 20rpx;
		}
	
		.cuIcon-right {
			color: #bfbfbf;
			font-size: 36rpx;
		}
	}
	
	// 标题卡片
	.title-box {
		background-color: #fff;
		.goods-title {
			font-size: 28rpx;
			font-weight: 600;
			line-height: 42rpx;
		}
	
		.sub-title {
			color: #a8700d;
			font-size: 24rpx;
			font-weight: 500;
			line-height: 42rpx;
		}
		.butie-box{
			color: #AAAAAA;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 25upx;
		}
	}
	
	// 拼团组件
	.ptuan-group{
		display: flex;
		justify-content: space-between;
		padding: 0 22upx;
		margin-top: 30upx;
		.img-group-box{
			position: relative;
			margin-left: 120upx;
			display: flex;
			width: 100upx;
			
			image{
				width: 44upx;
				height: 44upx;
				border-radius: 50%;
				margin-left: -15upx;
			}
		}
		.ptuan-tip{
			color: #AAAAAA;
			font-size: 25upx;
		}
	}
	// 拼团列表
	.goods-list-box{
			background: #FFFFFF;
			// border: 2upx solid #E8CE99;
			// border-radius: 10upx;
			margin: 0 auto;
			// margin-top: 66upx;
			.goods-list-contnet{
				padding-top: 15upx;
				.list-content-item{
					.style1{
						// width: 648upx;
						// height: 95upx;
						margin: 0 auto;
						
						border-radius: 10upx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 18upx 25upx;
						// background-color: #FCEFED;
						.left{
							font-weight: bold;
							image{
								vertical-align: middle;
							}
						}
						.right{
							color: #F0250C;
						}
					}
					.style2{
						width: 700upx;
						height: 57upx;
						background: #FFF8EA;
						border-radius: 10upx;
						text-align: center;
						line-height: 57upx;
						color: #BEA36C;
						font-size: 22upx;
						margin: 0 auto;
					}
					
				}
				// .list-content-item:nth-of-type(odd){
				// 	background-color: #FCEFED;
				// }
			}
			
		}
	// 红包组件
		.red-left{
			.price-box{
				color: #FA0D0D;
				font-size: 27upx;
			}
			.piper-count{
				color: #7C7A7A;
				font-size: 22upx;
			}
		}
		.red-right{
			.count{
				color: #FFFFFF;
				font-size: 27upx;
				text-align: center;
			}
			.butie{
				width: 160upx;
				height: 45upx;
				background: linear-gradient(90deg, #FDDBA0, #FDEDDA, #FADB9C);
				border-radius: 23upx;
				font-size: 27upx;
				color: #D01921;
				text-align: center;
				line-height: 45upx;
				font-weight: bold;
				margin-top: 10upx;
			}
		}
	
	// 拼团玩法说明
	.pingtuan-tipsbox{
		margin-top: 30upx;
		padding: 35upx 20upx;
		border-bottom: 15upx #F6F6F6 solid;
		border-top: 15upx #F6F6F6 solid;
		.tipsbox-title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				font-size: 27upx;
				font-weight: bold;
			}
			.right{
				width: 107upx;
				height: 40upx;
				border: 1upx solid #FF4F10;
				border-radius: 16upx;
				font-size: 22upx;
				color: #FF4F10;
				text-align: center;
				line-height: 40upx;
			}
		}
		.line-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 22upx;
			color: #454444;
			margin-top: 30upx;
			.line-item{
				display: flex;
				align-items: center;
				.number{
					background-color: #B5B5B5;
					color: #FFFFFF;
					width: 25upx;
					height: 25upx;
					text-align: center;
					line-height: 25upx;
					border-radius: 25upx;
					margin-right: 7upx;
				}
			}
		}
		.shuoming-box{
			display: flex;
			align-items: center;
			margin-top: 30upx;
			
		}
	}
	// 底部工具栏
	.tabbar-foot {
		min-height: 100rpx;
		width: 100%;
	}
	.detail-foot_box {
		min-height: 100rpx;
		border-top: 1rpx solid rgba(238, 238, 238, 1);
		background-color: #fff;
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 999;
	
		.left,
		.detail-right {
			flex: 1;
		}
	
		.tools-item {
			flex: 1;
			height: 100%;
	
			.tool-img {
				width: 46rpx;
				height: 46rpx;
			}
	
			.tool-title {
				font-size: 22rpx;
				line-height: 22rpx;
				padding-top: 8rpx;
			}
		}
	
		.detail-btn-box {
			flex: 1;
	
			.tool-btn {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(#fff, 0.9);
				width: 210rpx;
				min-height: 70rpx;
				border-radius: 35rpx;
				padding: 0;
				margin-right: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.price {
					font-size: 24rpx;
					line-height: 24rpx;
					font-weight: bold;
					color: rgba(#fff, 0.9);
				}
	
				.price-title {
					font-size: 20rpx;
					line-height: 20rpx;
					font-weight: 500;
					color: rgba(#fff, 0.9);
					padding-top: 8rpx;
				}
			}
	
			.add-btn {
				box-shadow: 0px 2rpx 5rpx 0px rgba(102, 103, 104, 0.46);
				background: linear-gradient(90deg, rgba(103, 104, 105, 1), rgba(82, 82, 82, 1));
			}
	
			.pay-btn {
				box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
				background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			}
	
			.score-btn {
				width: 330rpx;
				height: 76rpx;
				background: linear-gradient(98deg, #E95E2A, #F0953E);
				border-radius: 38rpx;
				font-size: 30rpx;
				display: grid;
				place-items:center;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				margin-right: 20rpx;
			}
	
			.seckill-btn {
				width: 432rpx;
				line-height: 70rpx;
				background: linear-gradient(93deg, rgba(208, 19, 37, 1), rgba(237, 60, 48, 1));
				box-shadow: 0px 7rpx 6rpx 0px rgba(#ed3c30, 0.22);
				font-size: 28rpx;
	
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				border-radius: 35rpx;
				padding: 0;
				margin-right: 20rpx;
			}
	
			.seckilled-btn {
				width: 432rpx;
				line-height: 70rpx;
				background: rgba(221, 221, 221, 1);
				font-size: 28rpx;
	
				font-weight: 500;
				color: #999999;
				border-radius: 35rpx;
				padding: 0;
				margin-right: 20rpx;
			}
	
			.groupon-btn {
				width: 210rpx;
				height: 70rpx;
				background: linear-gradient(90deg, rgba(254, 131, 42, 1), rgba(255, 102, 0, 1));
				box-shadow: 0px 7rpx 6rpx 0px rgba(255, 104, 4, 0.22);
				border-radius: 35rpx;
			}
		}
	}
	
	.detail-title{
		height: 80rpx;
		display: grid;
		place-items:center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
	}
	
	.middleContent{
		// height: 190rpx;
		display: flex;
		flex-direction: column;
		border-top: 15rpx solid #F8F8F8;
		border-bottom: 15rpx solid #F8F8F8;
		.middleContent-item{
			// flex: 1;
			height: 95rpx;
			display: flex;
			align-items: center;
			padding: 0 26rpx;
			text{
				color: 	#C0C0C0;
			}
			.content{
				padding-left: 69rpx;
				flex: 1;
				display: flex;
				align-items: center;
				.selectIcon{
					width: 32rpx;
					height: 32rpx;
					margin-right: 21rpx;
				}
			}
			
			
		}
	}
</style>


<style scoped lang="scss">
	.r_bag {
		.bag1 {
			position: fixed;
			left: -46upx;
			top: 160upx;
			width: 150upx;
			height: 100upx;
			z-index: 999;
		}
	}

	// 红包封面
	.rbag_model {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 1000;

		.rbag_con {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 80%;
			height: 840upx;
			background-color: #da4d44;
			margin: auto;
			border-radius: 14upx;
			box-shadow: 0upx 0upx 10upx rgba(0, 0, 0, 0.2);

			.rbag_top {
				position: absolute;
				left: -20%;
				top: 0;
				width: 140%;
				height: 540upx;
				background-color: #e0534a;
				border-radius: 0 0 50% 50%;
				box-shadow: 0 0 14upx rgba(0, 0, 0, 0.4);
				z-index: 1001;

				.rbag_top_info {
					margin-top: 60upx;

					.rbag_logo {
						width: 160upx;
						height: 160upx;
						border-radius: 50%;
						display: block;
						margin: 0 auto;
						overflow: hidden;
					}

					.app_name {
						font-size: 38upx;
						color: #f6ac96;
						text-align: center;
						margin-top: 18upx;
						letter-spacing: 1upx;
					}

					.rbag_tips {
						font-size: 50upx;
						color: #edddd3;
						text-align: center;
						margin-top: 34upx;
						letter-spacing: 1upx;
					}
				}
			}

			.open_rbag_btn {
				position: absolute;
				top: 450upx;
				left: 0;
				right: 0;
				width: 180upx;
				height: 180upx;
				line-height: 180upx;
				border-radius: 50%;
				margin: 0 auto;
				text-align: center;
				background-color: #ffd287;
				font-size: 55upx;
				color: #fef5e8;
				box-shadow: 2upx 2upx 6upx rgba(0, 0, 0, 0.2);
				z-index: 1002;
			}

			.hide_btn {
				position: absolute;
				bottom: -110upx;
				left: 0;
				right: 0;
				width: 80upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				margin: 0 auto;
			}
		}

		.hidden {
			overflow: hidden;
		}
	}

</style>


<style scoped lang="scss">
	.specification{
		width: 750rpx;
		height: 623rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		padding: 40rpx 33rpx 0;
		.top-content{
			display: flex;
			height: 160rpx;
			.cover{
				width: 127rpx;
				height: 127rpx;
				image{
					width: 100%;
					border-radius: 10rpx;
				}
			}
			
			.price{
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #E95F2A;
				margin-left: 33rpx;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				.num{
					font-size: 24rpx;
					color: #b3b3b3;
					font-weight: 400;
				}
			}
			
		}
		
		text{
			font-size: 28rpx;
			color: #000000;
			font-weight: 600;
		}
		.middle-content{
			flex: 1.5;
			.arr{
				display: flex;
				margin-top: 40rpx;
				.item{
					height: 48rpx;
					background: #F3F3F3;
					border-radius: 10rpx;
					color: #737373;
					padding:  0 35rpx;
					margin-right: 24rpx;
					font-size: 26rpx;
					display: flex;
					align-items: center;
				}
				.activeItem{
					background: #FFF4EF;
					color: #E9612B;
				}
			}
		}
		.bottom-content{
			flex: 1.5;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.count{
				display: flex;
				align-items: center;
				text{
					margin: 0 20rpx;
				}
				.input{
					width: 120rpx;
					height: 85rpx;
				}
			}
		}
		.btn{
			width: 700rpx;
			height: 76rpx;
			background: linear-gradient(98deg, #E95E2A, #F0953E);
			border-radius: 35px;
			color: #fff;
			display: grid;
			place-items: center;
			font-size: 30rpx;
			margin-bottom: 30rpx;
		}
	}
	
	
	
	.serverPopup{
		width: 750rpx;
		height: 533rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		.title{
			width: 100%;
			height: 90rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
			display: grid;
			place-items: center;
		}
		.content{
			flex: 1;
			padding: 0 45rpx;
			.contentItem{
				margin-top: 40rpx;
			}
			
			.content-title{
				display: flex;
				align-items: center;
				font-weight: 600;
				.selectIcon{
					width: 32rpx;
					height: 32rpx;
					margin-right: 17rpx;
				}
			}
			.text{
				color: #686868;
				padding-left: 40rpx;
				font-size: 24rpx;
			}
		}
		.btn{
			width: 700rpx;
			height: 76rpx;
			background: linear-gradient(98deg, #E95E2A, #F0953E);
			border-radius: 35px;
			color: #fff;
			display: grid;
			place-items: center;
			font-size: 30rpx;
			margin-bottom: 30rpx;
		}
	}
	
	
	.price{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #E95F2A;
		margin-top: 15rpx;
		margin-bottom: 30rpx;
	}
	
	.tixinwarp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.tixinrect {
		width: 530upx;
		height: 450upx;
		background: #FFFFFF;
		border-radius: 10upx;

		.title-image {
			width: 217upx;
			height: 217upx;
			margin: 0 auto;
			margin-top: -110upx;
		}

		.tips {
			display: flex;
			align-content: center;
			justify-content: space-between;
			margin-top: 5upx;
			padding: 0 50upx;

			.line {
				width: 123upx;
				height: 1upx;
				background: #E5E5E5;
				margin-top: 17upx;
			}

			.title {
				font-size: 26upx;
				color: #000000;
				font-weight: bold;
			}
		}

		.tishi-content {
			font-size: 24upx;
			color: #6E6D6D;
			padding: 0 60upx;
			margin-top: 50upx;
			text-align: center;
		}

		.cancel-btn {
			width: 461upx;
			height: 65upx;
			background: #FF6027;
			border-radius: 33upx;
			text-align: center;
			line-height: 65upx;
			color: #FFFFFF;
			font-size: 28upx;
			margin: 0 auto;
			margin-top: 50upx;
		}
	}
</style>
